<template>
  <div class="login-form-wrapper">
    <div class="login-form-title">系统登录</div>
    <div class="login-form-sub-title">system sign in </div>
    <div class="login-form-error-msg">{{ errorMessage }}</div>
    <a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
      <a-form-item field="username" :rules="[{ required: true, message: '请输入用户名' }]"
        :validate-trigger="['change', 'blur']" hide-label>
        <a-input v-model="userInfo.username" placeholder="请输入用户名">
          <template #prefix>
            <icon-user />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item field="password" :rules="[{ required: true, message: '请输入密码' }]"
        :validate-trigger="['change', 'blur']" hide-label>
        <a-input-password v-model="userInfo.password" placeholder="请输入密码" allow-clear>
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>
      <a-space :size="16" direction="vertical">
        <div class="login-form-password-actions">
          <a-checkbox checked="rememberPassword">
            记住密码
          </a-checkbox>
          <a-link>忘记密码</a-link>
        </div>
        <a-button type="primary" html-type="submit" long :loading="loading">
          确认登录
        </a-button>
        <!-- <a-button type="text" long class="login-form-register-btn">
          账户注册
        </a-button> -->
      </a-space>
    </a-form>
  </div>
  <Verify mode="pop" captchaType="blockPuzzle" ref="verify" @success="doSubmit"></Verify>

</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import Verify from '@/components/verifition/Verify.vue';
import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
import request from '@/config/request';
import utils from '@/utils/utils';
import { useStore } from 'vuex';
const store = useStore();
const errorMessage = ref('');
const loading = ref(false);
const verify = ref();
const userInfo = reactive({
  username: ref(),
  password: ref(),
  token: ref()
});

/**
 * 显示验证码
 */
const showVerify = () => {
  verify.value.show();
}

/**
 * 验证码回调
 * @param code 
 */
const doSubmit = (code: any) => {
  userInfo.token = code.captchaVerification;
  if (loading.value) { return; }
  utils.showSpin("登录中,请稍后...");
  loading.value = true;
  request.post("/platform/login", userInfo).then(ret => {
    saveLoginData(ret.data);
  }).finally(() => {
    loading.value = false;
  })
};

/**
 * 登录
 */
const handleSubmit = async ({
  errors,
  values,
}: {
  errors: Record<string, ValidatedError> | undefined;
  values: Record<string, any>;
}) => {
  if (errors) { return; }
  showVerify();//显示验证码
};

/**
 * 缓存用户信息
 */
const saveLoginData = (data: any) => {
  store.commit('account/setToken', data.token);
  store.commit('account/setUser', data);
  store.commit('account/setPermissions', data.role);
  store.commit('account/setRoles', data.menu);
  //登录成功
  utils.success('登录成功,正在进入系统....', 2).then(() => {
    window.location.href = '/system/main';
  });
};

/**
 * 记住密码
 * @param value 
 */
const setRememberPassword = (value: boolean) => {

};
</script>

<style lang="less" scoped>
.login-form {
  &-wrapper {
    width: 320px;
  }

  &-title {
    color: var(--color-text-1);
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
  }

  &-sub-title {
    color: var(--color-text-3);
    font-size: 16px;
    line-height: 24px;
  }

  &-error-msg {
    height: 32px;
    color: rgb(var(--red-6));
    line-height: 32px;
  }

  &-password-actions {
    display: flex;
    justify-content: space-between;
  }

  &-register-btn {
    color: var(--color-text-3) !important;
  }
}
</style>
